<template>
  <div class="recommend">
    <top-banner></top-banner>

    <div class="content wrap-v2">
      <div class="rcmd-left">
        <hot-recommend />
        <new-album />
        <rcmd-ranking />
      </div>

      <div class="rcmd-right">
        <user-login />
        <settle-singer />
        <hot-anchor />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import TopBanner from "./child/top-banner/index.vue";
import HotRecommend from "./child/hot-recommend/index.vue";
import NewAlbum from "./child/new-album/index.vue";
import RcmdRanking from "./child/rcmd-ranking/index.vue";
import UserLogin from "./child/user-login/index.vue";
import SettleSinger from "./child/settle-singer/index.vue";
import HotAnchor from "./child/hot-anchor/index.vue";

export default defineComponent({
  components: {
    TopBanner,

    HotRecommend,
    NewAlbum,
    RcmdRanking,

    UserLogin,
    SettleSinger,
    HotAnchor
  },

  setup() {
    
  },
})
</script>

<style lang="less" scoped>
.content {
  background: #fff;
  display: flex;

  .rcmd-left {
    padding: 20px;
    width: 729px;
  }

  .rcmd-right {
    width: 250px;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;
  }
}
</style>
